import { Ref, watchEffect, ref } from 'vue';

interface IntersectionObserverProps {
	target: Ref<Element | null | undefined>;
	root?: Ref<any>;
	onIntersect: IntersectionObserverCallback;
	rootMargin?: string;
	threshold?: number;
}

export function useIntersectionObserver({
	target,
	root,
	onIntersect,
	rootMargin = '0px',
	threshold = 0.1,
}: IntersectionObserverProps) {
	let cleanup = () => {};
	const observer: Ref<Nullable<IntersectionObserver>> = ref(null);
	const stopEffect = watchEffect(() => {
		cleanup();

		observer.value = new IntersectionObserver(onIntersect, {
			root: root ? root.value : null,
			rootMargin,
			threshold,
		});

		const current = target.value;

		current && observer.value.observe(current);

		cleanup = () => {
			if (observer.value) {
				observer.value.disconnect();
				target.value && observer.value.unobserve(target.value);
			}
		};
	});

	return {
		observer,
		stop: () => {
			cleanup();
			stopEffect();
		},
	};
}
